import React from 'react';
import { Flex, Image, Avatar, Button } from 'antd';
import { formatTimestamp } from '@/utils/dateFormat';
import style from './PlaylistHeader.module.css';

export default function PlaylistHeader({ playlistData }) {
  return (
    <Flex>
      <Image className={style.img} height={250} src={playlistData?.coverImgUrl} preview={false} />
      <section className={style.info}>
        <h2>{playlistData?.name}</h2>
        <div className={style.creator}>
          <Avatar src={playlistData?.creator?.avatarUrl} size='large'/>
          <span>{playlistData?.creator?.nickname}</span>
          <span>创建时间:{formatTimestamp(playlistData?.createTime, 'YYYY-MM-DD')}</span>
        </div>
        <div className={style.description}>{playlistData?.description}</div>
        <div className={style.btns}>
          <Button className={style.btn} type="primary" shape="round" icon={<span className='iconfont icon-bofang4'/>} size='large'>播放全部</Button>
          <Button shape="round" icon={<span className='iconfont icon-xihuan'/>} size='large'>收藏</Button>
        </div>
      </section>
    </Flex>
  )
}
